
.create-header {
    height: 56px;
    width: 100%;
    padding: 0 16px;
    border-bottom: 1px solid #F4F7F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 999;
    &__title {
        color: #262626;
        font-size: 16px;
        font-weight: 500;
    }
}

.create-content {
    width: 100%;
    background-color: #fff;
    min-height: calc(100vh - 88px);
    padding-bottom: 10px;
    .cre-container{
        padding-top: 24px;
        max-width: 800px;
        margin: 0 auto;
        .cre-header {
            display: flex;
            padding: 0 12px;
            background-color: #F7F8F8;
            height: 40px;
            align-items: center;
            justify-content: space-between;
            .cre-title {
                font-size: 16px;
                font-weight: 500;
                color: #262626;
            }
            .cre-principle {
                font-size: 14px;
                font-weight: 400;
                color: $color-primary;
                cursor: pointer;
            }
        }

        .cre-step {
            margin: 24px 0;
            .el-step {
                // 完成样式修复
                .is-finish {
                    .el-step__icon.is-text {
                        color: #fff;
                        background-color: $color-primary;
                    }
                }
                // 
                .is-process, .is-wait {
                    .el-step__icon.is-text{
                        color: #BFBFBF;
                        border-color: #BFBFBF;
                    }
                }
                .is-wait {
                    .el-step__icon.is-text {
                        background-color: #fff;
                    }
                }
                .el-step__title:not(.is-finish) {
                    color: #BFBFBF;
                }
            }
        }

        .cre-desc {
            &-title {
                color: #262626;
                font-size: 14px;
                font-weight: 500;
                line-height: 22px;
                margin-bottom: 8px;
            }
            &-info {
                color: #595959;
                font-size: 14px;
                font-weight: 400;
            }
        }

        .cre-action-app {
            width: 100%;
            margin: 16px 0;
            .cre-action-app-title {
                margin-bottom: 5px;
                font-size: 14px;
                font-weight: 400;
                color: #262626;
                &-tip {
                    color: #f56c6c;
                    display: inline-block;
                    margin-right: 4px;
                    line-height: inherit;
                }
            }
        }

        .cre-obj-field {
            &-list {
                .cre-obj-field-item {
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    margin-bottom: 12px;
                    &:first-child {
                        margin-top: 12px;
                    }
                    &:last-child {
                        margin-bottom: 0px;
                    }
                    .cre-obj-field-ipt {
                        width: 100%;
                    }
                    .cre-obj-field-delete {
                        cursor: pointer;
                        &:hover {
                            color: red;
                        }
                    } 
                }
            }
        }

        .cre-obj-field-add {
            margin-top: 16px;
        }
    }
}
@media screen and (max-width: 968px) {
    .create-content {
        .cre-container {
            width: 80%;
        }
    }
    
}
.setp-setting-photo {
    &-title {
        font-size: 14px;
        font-weight: 500;
        color: #262626;
        margin-bottom: 8px;
    }
    &-desc {
        font-size: 14px;
        color: #595959;
        font-weight: 400;
    }
    &-upload {
        width: 100%;
        height: 156px;
        margin-top: 16px;
        .el-upload {
            width: 100%;
            height: 100%;
            .el-upload-dragger {
                width: 100%;
                height: 100%;
            }
        }
    }

    .preview-list {
        margin-top: 8px;
        .preview-item {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            &:first-child {
                margin-top: 0;
            }
        }
        .preview-left {
            color: #8C8C8C;
            display: flex;
            align-items: center;
            gap: 4px;
            width: 100%;
            &-icon {
                width: 40px;
                height: 40px;
                flex-basis: 40px;
                flex-grow: 0;
                flex-shrink: 0;
                 .preview-img {
                    width: 100%;
                    height: 100%;
                    &:hover {
                        cursor: pointer;
                    }
                }
            }
            &-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                .preview-left-title {
                    max-width: 720px;
                    font-size: 12px;
                    font-weight: 400;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .preview-left-progress {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    min-height: 20px;
                    --progress-width: 0;
                    &-bar {
                        width: 100%;
                        height: 2px;
                        position: relative;
                        background-color: #EBEDF0;
                        &::after { 
                            content: '';
                            width: var(--progress-width);
                            position: absolute;
                            top: 0;
                            left: 0;
                            height: 100%;
                            background-color: $color-primary;
                        }
                    }
                }
            }
            &-action {
                display: flex;
                flex-direction: row;
                align-items: baseline;
                color: $color-primary;
                gap: 10px;
                &-size {
                    color: #8C8C8C;
                    font-size: 12px;
                    font-weight: 400;
                }
                &-rename,&-delete {
                    cursor: pointer;
                }
            }
        }
        // .preview-right {
        //     .check {
        //         color: #67C23A;
        //     }
        //     .close {
        //         display: none;
        //         color: red;
        //     }
        //     &:hover {
        //         .check {
        //             display: none; /* Hide check icon on hover */
        //         }
        //         .close {
        //             display: inline; /* Show close icon on hover */
        //             cursor: pointer;
        //         }
        //     }
        // }
    }
}

// 设置图片评级标准
.step-photo-base {
    .base-title {
        font-size: 16px;
        font-weight: 500;
        color: #262626;
        margin-bottom: 16px;
    }
    .base-content {
        &-item {
            min-height: 32px;
            line-height: 32px;
            display: flex;
            flex-wrap: wrap;
            // align-items: center;
            margin-bottom: 16px;
            flex-direction: column;
            &-title {
                font-size: 14px;
                color: #595959;
                font-weight: 500;
            }
            &-content {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                padding-left: 24px;
                .dot {
                    font-size: 24px;
                    color: inherit;
                    vertical-align: bottom;
                    padding-right: 8px;
                }
                &-item {
                    display: inline-flex;
                    flex-wrap: wrap;
                    margin-bottom: 4px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    // 实时质检
    .base-nowInt {
        margin-top: 24px;
        &-tips {
            color: #595959;
            font-size: 14px;
            margin: 16px 0 24px 0;
        }
        &-title {
            color: #262626;
            font-size: 14px;
            font-weight: 500;
        }
        &-switch {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-top: 8px;
            font-size: 13px;
            .question-icon {
                // padding-left: 5px;
            }
            .active {
                color: $color-primary;
            }
        }
        &-desc {
            font-size: 14px;
            margin-top: 8px;
            color: #8C8C8C;
        }
    }
}

.base-nowInt-tips-img {
    width: 100%;
    height: 147px;
    img {
        width: 100%;
        height: 100%;
    }
}